<script lang="ts" setup>
import { elementPlusEnum } from '@/utils/enumData'
import { filterEnum } from '@/utils'
import type { SearchItem } from '../interface'

const emit = defineEmits(['update:modelValue'])

interface TableFormProps {
  modelValue: boolean
  searchForm?: SearchItem[]
  searchParam?: { [key: string]: any } //搜索参数
  search: (params: any) => void //搜索方法
  reset: (params: any) => void //重置方法
}

const props = withDefaults(defineProps<TableFormProps>(), {
  modelValue: false,
  searchForm: () => [],
  searchParam: () => ({})
})

const visible = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', val)
  }
})
const component = (item: SearchItem) => {
  return filterEnum(item.el, elementPlusEnum, { label: 'value', value: 'label' })
}

/** 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示) */
const clearable = (param: SearchItem) => {
  return param.props?.clearable ?? (param?.defaultValue == null || param?.defaultValue == undefined)
}
/** 判断 placeholder */
const placeholder = (param: SearchItem) => {
  if (['datetimerange', 'daterange', 'monthrange'].includes(param?.props?.type)) {
    return {
      rangeSeparator: param?.props?.rangeSeparator ?? '至',
      startPlaceholder: param?.props?.startPlaceholder ?? '开始时间',
      endPlaceholder: param?.props?.endPlaceholder ?? '结束时间'
    }
  }
  const placeholder = param?.props?.placeholder ?? (param.el === 'input' ? '请输入' : '请选择')
  return { placeholder }
}

// 接收 enumMap
const enumMap = inject('enumMap', ref(new Map()))
// 选项数据
const optionEnum = (param: SearchItem) => {
  let enumData = enumMap.value.get(param.key) || enumMap.value.get(param.enumKey)
  if (!enumData) return []
  return enumData
}
// 判断 fieldNames 设置 label && value 的 key 值
const fieldNames = (item: SearchItem) => {
  return {
    label: item.fieldNames?.label ?? 'label',
    value: item.fieldNames?.value ?? 'value'
  }
}
</script>

<template>
  <Drawer v-model="visible" title="筛选条件" showClose @close="visible = false">
    <el-form>
      <el-form-item
        v-for="(item, index) in searchForm"
        :key="item"
        :label="item.label"
        v-show="item.el || item.render"
      >
        <component
          v-if="item.el"
          :is="component(item)"
          v-model="searchParam[item.key]"
          :clearable="clearable(item)"
          v-bind="{ ...item.props, ...placeholder(item) }"
          v-on="{ ...item.events }"
        >
          <template v-if="item.el === 'select'">
            <el-option
              v-for="(option, optionIndex) in optionEnum(item)"
              :key="item.key + optionIndex"
              :label="option[fieldNames(item)['label']] ?? option"
              :value="option[fieldNames(item)['value']] ?? option"
            ></el-option>
          </template>
          <template v-for="slot in item.slots" :key="slot.name" #[slot.name]>
            <component :is="slot.render"></component>
          </template>
        </component>
        <component v-else-if="item.render" :is="item.render"> </component>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="search">确定</el-button>
    </template>
  </Drawer>
</template>
